<template>
  <div style="height: 100px;width:100px;margin:100px auto;overflow: hidden;border: 1px red solid;">
    <div ref="box" class="box">
      <div ref="container" style="word-wrap: break-word;">
        <div  v-for="i in text">{{i}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      text : [""]
    }
  },
  mounted() {
    this.observeHeightChange();
    let _this = this

    const box = this.$refs.container;
    setInterval(()=>{
      _this.text.push("111111")
      // 对话时一直滚动
      box.scrollTop = box.scrollHeight - box.clientHeight;

    },500)
  },
  methods: {
    observeHeightChange() {
      const box = this.$refs.box;
      const observer = new ResizeObserver(entries => {
        for (let entry of entries) {
          const { height } = entry.contentRect;
          console.log('高度变化:', height);
          // 在这里处理高度变化的逻辑
        }
      });
      observer.observe(box);
    },
  },
  beforeUnmount() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
};
</script>

<style>
.box {
  width: 100%;
  background-color: #f0f0f0;
  transition: height 0.3s ease;
}
</style>